<template>
    <el-table :data="data" style="width: 100%" :row-style="showTr">
        <el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" align="left" :width="(index == 2) ? '120px' : ''">
            <template slot-scope="scope">


                    <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level"
                          :class="scope.row._level != 2 ? 'ms-tree-space' : 'ms-tree-space-three'"></span>
                    <button class="button is-outlined is-primary is-small i-button" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index, scope.row)">
                        <i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
                        <i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
                    </button>
                    <span v-else-if="index===0" :class="scope.row._level != 2 ? 'ms-tree-space' : 'ms-tree-space-three'"></span>

                    <i v-if="scope.row._level != 2" style="padding-left: 3px;font-style: normal" v-html="getVal(scope.row,column.dataIndex)"><!--{{getVal(scope.row,column.dataIndex)}}--></i>
                    <i v-else style="display:inline;font-style: normal ;padding-left: 54px; float: left;" v-html="getVal(scope.row,column.dataIndex)"><!--{{getVal(scope.row,column.dataIndex)}}--></i>

                    <!--<span v-if="index===0 && scope.row._level == 2">
                        <el-button v-if="scope.row._sort == 1 || scope.row._sort == 12" @click="upSort(scope.$index)" type="text" circle>↑</el-button>
                        <el-button v-if="scope.row._sort == 2 || scope.row._sort == 12" @click="downSort(scope.$index)" type="text" circle>↓</el-button>
                    </span>-->



            </template>
        </el-table-column>

        <el-table-column label="操作" v-if="treeType === 'normal'" align="left" width="280">
            <template slot-scope="scope">
                <el-button v-if="scope.row.item_level == 1" @click="handleReviseL1(scope.row)" type="primary"  plain>编辑</el-button>
                <el-button v-else @click="handleReviseL2(scope.row)" type="primary"  plain>编辑</el-button>


                <el-button v-if="scope.row.item_level == 1" @click="addReviseL(scope.row)" type="success"  plain>添加下级</el-button>
                <el-button v-if="scope.row.item_level == 2" @click="addReviseL2(scope.row)" type="success"  plain>添加下级</el-button>

                <el-button @click="handleDelete(scope.row.id, scope.row.item_level)" type="danger"  plain :autofocus="false">删除</el-button>
                <!--<span v-if="scope.row._level == 2">-->
                    <!--<el-button v-if="scope.row._sort == 1 || scope.row._sort == 12" @click="upSort(scope.$index)" type="text" circle>↑</el-button>-->
                    <!--<el-button v-if="scope.row._sort == 2 || scope.row._sort == 12" @click="downSort(scope.$index)" type="text" circle>↓</el-button>-->
                <!--</span>-->

            </template>
        </el-table-column>
    </el-table>
</template>
<script>
    import Utils from '../utils/index.js'
    import dict from '../../../common/js/dict';
    import {treeTableRefresh, isNullTrue} from '../../../common/js/commons';
    //  import Vue from 'vue'
    export default {
        name: 'tree-grid',
        props: {
            // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
            treeStructure: {
                type: Boolean,
                default: function () {
                    return false
                }
            },
            // 这是相应的字段展示
            columns: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // 这是数据源
            dataSource: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // 添加修改使用
            dirver: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            // 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
            requestUrl: {
                type: String,
                default: function () {
                    return ''
                }
            },
            // 这个是是否展示操作列
            treeType: {
                type: String,
                default: function () {
                    return 'normal'
                }
            },
            // 是否默认展开所有树
            defaultExpandAll: {
                type: Boolean,
                default: function () {
                    return false
                }
            }
        },
        data () {
            return {}
        },
        computed: {
            // 格式化数据源
            data: function () {
                let me = this;
                if (me.treeStructure && !isNullTrue(me.dataSource)) {
                    let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll);
                    return data;
                }
                return me.dataSource;
            }
        },
        methods: {

            // 显示行
            showTr: function (row, index) {
                let show = false;
                if (row.row.item_level == 1) {
                    show = true
                }else {
                    show = row.row._expanded;
                    if(row.row._expanded2) {
                        show = true;
                    }
                }
                row._show = show;
                return show ? '' : 'display:none;'
            },
            // 展开下级
            toggle: function (trIndex, row) {
                let me = this
                let level = row.item_level;
                let record = me.data[trIndex];
                record._expanded = !record._expanded;
                for (var i in record.child_dto_list) {
                    if(level == 1) {
                        record.child_dto_list[i]._expanded = false;
                        record.child_dto_list[i]._expanded2 = record._expanded;
                    }
                    if(level == 2) {
                        record.child_dto_list[i]._expanded = false;
                        record.child_dto_list[i]._expanded2 = record._expanded;
                        // console.log(level,record.child_dto_list[i]._expanded,record.child_dto_list[i]._expanded2);
                    }
                    //直接关闭一级的时候，将其他级别的也关闭（不可见）
                    if(record.child_dto_list[i].child_dto_list != null){
                        for (var j in record.child_dto_list[i].child_dto_list) {
                            record.child_dto_list[i].child_dto_list[j]._expanded = false;
                            record.child_dto_list[i].child_dto_list[j]._expanded2 = false;
                        }
                    }
                }
            },
            // 显示层级关系的空格和图标
            spaceIconShow (index) {
                let me = this
                if (me.treeStructure && index === 0) {
                    return true
                }
                return false
            },
            // 点击展开和关闭的时候，图标的切换
            toggleIconShow (index, record) {
                let me = this
                if (me.treeStructure && index === 0 && !isNullTrue(record.child_dto_list) && record.child_dto_list.length > 0) {
                    return true
                }
                return false
            },



            /* ======================================== 编辑（一二三级）============================================= */
            handleReviseL1 (row) {
                let condition = {
                    'ttype': 2,
                    'id': row.id,
                    'item_level': row.item_level,
                    'item_order_number': row.item_order_number,
                    'item_name': row.item_name
                };
                this.$emit('transferFormVisibleIs', condition);
            },
            handleReviseL2 (row) {
                let condition = {
                    'ttype': 2,
                    'id': row.id,
                    'item_level': row.item_level,
                    'item_order_number': row.item_order_number,
                    'star_level': row.star_level,
                    'item_main_point': row.item_main_point,
                    'item_parentid': row.item_parentid,
                    'item_pname': row._parent.item_name,
                    'item_name': row.item_name

                };
                this.$emit('transferFormVisibleIs', condition);

            },
            /* ================================= 添加下级 ========================================= */
            addReviseL (row) {
                var order_no = row.child_dto_list == null ? 1 : row.child_dto_list.length + 1;
                let condition = {
                    'ttype': 1,
                    'item_level': row.item_level,
                    'item_order_number': row.item_order_number + '.' + order_no,
                    'item_pname': row.item_name,
                    'item_parentid': row.id,
                };
                this.$emit('tarnsAddReviseFormIs', condition);

            },
            /* ================================= 添加隐患 ========================================= */
            addReviseL2 (row) {
                var order_no = row.child_dto_list == null ? 1 : row.child_dto_list.length + 1;
                let condition = {
                    'ttype': 1,
                    'item_level': row.item_level,
                    'item_order_number': row.item_order_number + '.' + order_no,
                    'star_level': '0',
                    'item_main_point': row.item_main_point,
                    'item_parentid': row.id,
                    'is_child_count': isNullTrue(row.child_dto_list) + ""
                };
                this.$emit('tarnsAddReviseFormIs', condition);

            },

            handleDelete (iid, level) {
                let condition = {};
                condition.id = iid;
                condition.ttype = 3;
                condition.item_level = level;
                this.$emit('transferFormVisibleIs', condition);
            },

            /* ================================= 排序 ↑ ========================================= */
            upSort(trIndex) {

                let me = this;
                let record = me.data[trIndex];
                let rep_record = me.data[trIndex-1];
                let condition = {
                    'before': rep_record.item_order,
                    'before_id': rep_record.id,
                    'after_id': record.id,
                    'after': record.item_order
                };
                this.$emit('tarnsSortIs', condition);
            },
            /* =================================  排序 ↓ ========================================= */
            downSort(trIndex) {
                let me = this;
                let record = me.data[trIndex];
                let rep_record = me.data[trIndex+1];
                let condition = {
                    'before': record.item_order,
                    'before_id': record.id,
                    'after_id': rep_record.id,
                    'after': rep_record.item_order
                };
                this.$emit('tarnsSortIs', condition);
            },

            /* ================ 一二三级显示数据 =================================================================*/
            getVal (row, column) {
                if(!isNullTrue(column) && column == 'item_main_point') {
                    if(row.item_level == 3) {
                        return row.item_main_point;
                    }
                }
                else if (!isNullTrue(column) && column == 'star_level') {
                    if(row.item_level == 3) {
                        if(!isNullTrue(row.star_level)){
                            var starNum = '';
                            for(var i = 0; i < row.star_level; i++){
                                starNum += '<img src="/assets/images/star_list.png" alt="star" />';
                            }
                            return starNum == '' ? ' — ' : starNum;
                        }else{ return ' — '; }
                    }
                }else if (!isNullTrue(row)){
                    return row.item_order_number + '  ' + row.item_name;
                }else {
                    return 'error';
                }
            }
        },

        watch: {
            'dirver'(newVal, oldVal){
                return treeTableRefresh(newVal, this.dataSource, false);
            }
        },

        mounted() {}
    }
</script>
<style scoped>
    .ms-tree-space-three{
        display: inline;
    }
    .ms-tree-space{
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        width: 18px;
        height: 14px;}
    .ms-tree-space::before{content: ""}
    table td{
        line-height: 26px;
    }
    .button {
        padding: 0;
        float: none;
    }

    .i-button{
        /*margin: 0 10px 0 0;*/
        /*list-style-type: none;
        width: 15px;
        height: 0;*/
        outline: none;
        background: 0 0;
        border: none;
    }

    /*删除按钮样式*/
    .el-button--danger.is-plain:focus {
        background: #fef0f0;
        border-color: #fbc4c4;
        color: #f56c6c;
    }
    .el-button--danger.is-plain:hover {
        color: #fff;
        background-color: #f56c6c;
        border-color: #f56c6c;
    }
</style>
